<template>
<div class="pd_tb10">
    <div class="flex_sb mb10">
        <div class="title_1">保单关联</div>
        <el-button plain icon="Plus" type="primary" @click="add">新增</el-button>
    </div>
    <el-table v-loading="loading" :data="tableList">
        <el-table-column label="保单号" prop="policyNo" min-width="120" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" fixed="right" min-width="160" class-name="small-padding fixed-width">
          <template #default="{ row }">
              <el-button link type="primary">详情</el-button>
          </template>
        </el-table-column>
    </el-table>
    <pagination
        v-show="total > 10"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <el-dialog v-model="addFormVisible" @close="addDialogClose" title="新增保单关联" width="60%" append-to-body>
      <el-form ref="addFormRef" class="custom-form" :model="addFormData" :rules="addFormRules" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="保单号" prop="policyNo">
              <el-input v-model="addFormData.policyNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-button type="primary" @click="saveContacts">关联</el-button>
        </el-row>
      </el-form>
    </el-dialog>
</div>
</template>
        
<script setup>
const loading = ref(false);
const tableList = ref([]);
const total = ref(0);
const queryParams = reactive({
  certNo: "",
  pageNo: 1,
  pageSize: 10,
});
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableList.value = [
      {
        policyNo: "CX12381238476348"
      }
    ];
    total.value = Number(tableList.value.length);
    loading.value = false;
  }, 300);
};
getList();

// 增加联系人-start
const add = () => {
  addFormVisible.value = true
};
const addFormVisible = ref(false)
const addFormRef = ref(null)
const addFormRules = {
  policyNo: [
    { required: true, message: "请输入", trigger: "blur" },
  ]
}
const addFormData = reactive({
  policyNo:''
})
const addDialogClose = () => {
  addFormRef.value.resetFields()
  addFormVisible.value = false
}
const saveContacts = () => {
  addFormRef.value.validate(valid => {
    if(valid){
      addDialogClose()
    }
  })
}
// 增加联系人-end
</script>
      
<style lang="scss" scoped>
.pd_tb10 {
  padding: 10px 0;
}
</style>